<template>
  <!-- <div>
  计算属性+watch+生命周期 
  </div> -->
  <!-- <br>
姓：<input type="text" v-model="sur" />
名：<input type="text" v-model="name"/>
全名z：<input type="text" v-model="fullName"/> -->

<!-- <input type="text" v-model="num"/> -->
<!-- <button @click="clickFun">click me</button> -->

<!-- 姓名：<input type="text" v-model="stus.name"/>
年龄：<input type="text" v-model="stus.age"/>
<button @click="setName">修改名字</button>
<button @click="setAge">修改年龄</button>
<button @click="setStus">修改整个人</button> -->

<!-- <input type="text" v-model="objGet.name" />
<input type="text" v-model="objGet.age" />  
<input type="text" v-model="objGet.skill.code" />
<input type="text" v-model="objGet.skill.level" />
<br>
<button @click="setLxyName">修改名字</button>
<button @click="setLxyAge">修改年龄</button>
<br>
<button @click="setLxyCode">修改代码</button>
<button @click="setLxyLevel">修改等级</button>
<button @click="setLxy">修改Lxy</button> -->

防抖:<input type="text" v-model="shake">
节流:<input type="text" v-model="throttle">
<button @click="shakeBnt">防抖</button>
<button @click="throttleBnt">节流</button>
</template>

<script setup name="WatchFour">
//组合式api需导入函数，在使用。
import {ref,computed,watch,reactive,watchEffect,defineExpose} from 'vue'

var shake = ref(0);
var throttle = ref(0);

function shakeBnt(){
  shake.value += 1;
}

function throttleBnt(){
  throttle.value += 1;
}

watchEffect(()=>{
  if(shake.value >= 3 || throttle.value >= 5){
    console.log("请禁用此用户,有爬虫风险!");
  }
})

//方式三:监视某个属性用getter函数
var objGet = reactive({
  name:"lxy",
  age:18,
  skill:{
    code:"vue3",
    level:1,
  }
})

function setLxyName(){
  objGet.name += "~";
}

function setLxyAge(){
  objGet.age += 1;
}

function setLxyCode(){
  objGet.skill.code = "javaScript";
}

function setLxyLevel(){
  objGet.skill.level += 1;
}

function setLxy(){
  objGet.name = "keep";
  objGet.age = 26;

  objGet.skill = {
    code:"JavaSpring", level:100,
  }  
}
watch([objGet.skill,()=>objGet.name],(newValue,oldValue)=>{
  console.log("objGet变化了",newValue,oldValue);

}) //do-while:,immediate:true。

//方式一:ref【基本类型】
var num = ref(1);

var stus = ref({
  name:"zs",
  age:18,
})

function setName(){
  stus.value.name += "~";
}

function setAge(){
  stus.value.age += 1;
}

function setStus(){
  stus.value = {
    name:"ls",
    age:20,
  }
}

var objs = watch(stus,(newValue,oldValue)=>{
  console.log("stus变化了",newValue,oldValue);
  //方式二 rections 监视深层嵌套的属性值{deep:true}默认开启
},{deep:true}) //do-while:,immediate:true。


function clickFun(){
  return num.value += 1;
}
var watchVar = watch(num,(newValue,oldName)=>{
  console.log("sum变化了",newValue,oldName);
  //当 newValue 到大结束条件，停止监视。
  if(newValue == 3){
    alert("送满3元减去0元的优惠卷！");
    watchVar();
  }
})

var sur = ref('');
var name = ref('');
var fullName = computed(()=>{
  return sur.value + name.value;
})
var anxiety = ref("Action is a powerful remedy for anxiety.");
function change (){
console.log("doing");
}
defineExpose({
    anxiety,
    change,
})
</script>

